<template>
  <div class="box" ref="container">
    <h3>利用vuex保存滚动位置及数据，下次组件mounted时不会请求数据，并且会滚动到上次记录位置</h3>
    <h5>滚动记录最方便的可以使用history路由（需添加后台配置），具体查看官方文档</h5>
    <br/>
    <p v-for="(item, index) in data" :key="index">{{item}}</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'test2',
  computed: {
    ...mapState('test', [
      'isRefresh',
      'data',
      'scroll'
    ])
  },
  methods: {
    ...mapMutations('test', [
      'updatePosition',
      'modifyData'
    ]),
    listenScroll () {
      this.$refs.container.onscroll = (e) => {
        this.updatePosition(e.target.scrollTop)
      }
    },
    refresh () {
      if (this.isRefresh) {
        // 可以全局修改是否刷新，进行该路由页面的数据更新及位置更新
        const newData = [1, 2, 3, 4, 5].map(item => {
          return '我是新数据' + item
        })
        this.modifyData(newData)
        this.updatePosition(0)
      }
    }
  },
  mounted () {
    this.$refs.container.scrollTop = this.scroll
    this.listenScroll()
    this.refresh()
    console.log(this)
  }
}
</script>

<style lang="scss" scoped>

</style>
